<template>
  <div>
    <city-header></city-header>
    <city-search :allCities="allCities"></city-search>
    <city-list :allCities="allCities" :hot="hotCities" :letter="letter"></city-list>
    <city-alphabet :allCities="allCities" @change="handleLetterChange"></city-alphabet>
  </div>

</template>

<script>
  import axios from 'axios';
  import CityHeader from './components/Header';
  import CitySearch from './components/Search';
  import CityList from './components/List';
  import CityAlphabet from './components/Alphabet';
 export default {
   name: "City",
   components: {
     CityHeader,
     CitySearch,
     CityList,
     CityAlphabet
   },
   data () {
      return {
        allCities: {},
        hotCities: [],
        letter: ""
      }
   },
   methods: {
     getCityInfo () {
       // axios.get('/api/city.json').then(this.handleGetCityInfoSucc);
		   axios.get('./static/mock/city.json').then(this.handleGetCityInfoSucc);
     },
     handleGetCityInfoSucc (res) {
       console.log(res);
       res = res.data;
       if (res.ret && res.data) {
        const data = res.data;
        this.allCities = data.cities;
        console.log(this.allCities);
        this.hotCities = data.hotCities;
       }
     },
     handleLetterChange (letter) {
       this.letter = letter;
       // console.log(letter);
     }
   },
   mounted () {
     this.getCityInfo();
   }
 }
</script>

<style lang="stylus" scoped>
</style>
